<template>
	<main class="profile">
		<header>
			<titlebanner :title="'Profile'"></titlebanner>
		</header>
		<section>
			<div class="pimage">
				<img src="../assets/images/12102692943_7542dbf918_b@2x.png" alt="">
				<div class="right">
					<img src="../assets/images/6689741705_168a8fb882_o@2x.png" alt="">
					<img src="../assets/images/6689741705_168a8fb882_o@2x.png" alt="">
					<img src="../assets/images/6689741705_168a8fb882_o@2x.png" alt="">
				</div>
			</div>
			<ul class="notice">
				<li>{{liked}}<span>Liked you</span></li>
				<span></span>
				<li>{{ylike}}<span>You liked</span></li>
				<span></span>
				<li>{{yWatch}}<span>Watched</span></li>
			</ul>
			<article class="about">
				<h3>ABOUT</h3>
				<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Unde mollitia eum earum fugiat ipsum autem consequuntur, laudantium dolore, culpa! Praesentium consectetur nulla error cumque quasi, asperiores quisquam. Sit aut, architecto!</p>
				<ul>
					<li><img src="../assets/images/facebook@2x.png" alt=""></li>
					<li><img src="../assets/images/twitter@2x.png" alt=""></li>
					<li><img src="../assets/images/googleplus@2x.png" alt=""></li>
					<li><img src="../assets/images/linkedin@2x.png" alt=""></li>
				</ul>				
			</article>
		</section>
	</main>
</template>
<script>
import titlebanner from '../assets/components/title.vue'
export default{
	data(){
		return{
			liked:this.$store.state.liked,
			ylike:this.$store.state.ylike,
			yWatch:this.$store.state.yWatch,
		}
	}, 
	components:{ 
		titlebanner
	}
}
</script>
<style lang="scss">
main.profile{
	background-color:#f7f7f7;
	>section{
		>div.pimage{
			overflow:hidden;
			display:flex;
			justify-content:space-between;
			>img{
				display:block;
				max-width:100%;
				height:15.013333rem;
				margin-right:1px;
			}
			>div.right{
				>img{
					height:4.986667rem;
					display:block;
				}
			}
		}
		>ul.notice{
			background-color:#fff;
			display:flex;
			list-style:none;
			align-items:center;
			justify-content:center;
			>li{
				flex:1;
				padding:0.8rem;
				text-align:center;
				font-weight:bold;
				font-size:0.96rem;
				color:#363636;
				>span{
					color:#6f6f6f;
					font-size:0.64rem;
					font-weight:normal;
					display:block;
				}
			}
			>span{
				display:block;
				width:1px;
				height:1.6rem;
				background:#d7d7d7;
			}
		}
		>article{
			margin-top:1.066667rem;
			background:#fff;
			>h3{
				font-size:0.64rem;
				color:#363636;
				padding:0.933333rem 0 0 0.933333rem;
			}
			>p{
				margin-left:0.933333rem;
				margin-right:0.933333rem;
				font-size:0.8rem;
				color:#6f6f6f;
				word-break:break-all;
			}
			>ul{
				display:flex;
				list-style:none;
				align-items:center;
				justify-content:center;
				margin-top:2.4rem;
				>li{
					flex:1;
					&:first-child{
						>img{
							width:0.586667rem;
						}
					}
					>img{
						display:block;
						margin:0 auto;
						width:1.173333rem;
						height:1.173333rem;

					}
				}
			}
		}
	}
}
</style>